<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'

const food = ref('祖传猪脚饭')
const drink = ref('黄振龙凉茶')

// 侦听器
// 侦听一个基本类型的变化
watch(food, () => {
  console.log('天啦噜，猪脚饭不香了~')
})

// 同时侦听两个基本类型的变化
watch([food, drink], () => {
  console.log('猪脚饭+凉茶 很搭哦~~~')
})

const foodObj = reactive({
  name: '张亮麻辣烫',
  price: 15,
  drink: {
    name: '快乐水',
    price: 4
  }
})

// 侦听对象周昂某个基本类型的变化
watch(() => foodObj.price, () => {
  console.log('涨价了~~~')
})

// 参数 1 设置侦听的数据，或者属性
// 参数 2 数据改变之后的回调函数
// 参数 3 一些配置，比如深度侦听
watch(
  () => foodObj.drink,
  () => {
    console.log('饮料变了~~~')
  },
  {
    deep: true, // 是否开启深度侦听
    immediate: true,  // 是否在页面初次加载时执行一次（默认执行）
  }
)
</script>


<template>
  <div id="app">
    <h2 @click="food+='辣椒'">{{ food }}</h2>
    <h2 @click="drink+='陈皮'">{{ drink }}</h2>
    <h2>{{ foodObj }}</h2>
    <button @click="foodObj.name+='!'">改名字</button>
    <button @click="foodObj.price++">改价格</button>
    <button @click="foodObj.drink.price++">快乐水涨价</button>
    <button @click="foodObj.drink.name+='冰块'">快乐水改名</button>
  </div>
</template>

<style>

</style>
